<template>
	<view>
		<view class="mask" @touchmove.stop="" v-show="show" @click="clased()"></view>

		<view class="work-record" @click.stop="" @touchmove.stop=""
			:style="show ? 'transform: translateY(0rpx);' : 'transform: translateY(1000rpx);'">
			<view class="line" @click="clased()"><text></text></view>
			<view class="content">
				<view class="content_title">添加{{ title || '保养记录' }}</view>
				<view v-if="checkHistory['files' + suffix].need" class="tips"><text
						v-if="checkHistory['files' + suffix].must" style="color:red">*</text> 添加图片/视频 <text
						v-if="checkHistory['files' + suffix].must && checkHistory['files' + suffix].min"
						style="color:#999">(最少{{ checkHistory['files' + suffix].min }}张)</text> </view>
				<view class="imgBox" v-if="checkHistory['files' + suffix].need">
					<view class="imgBox-item" v-for="(item, index) in imgUrl" :key="index">
						<image @click="preViewFile(item, index)"
							:src="item.type == 'image' ? item.url : item.img || '/static/images/video.png'"
							mode="aspectFill"></image>
						<text class="text" @click="removeFile(index)">-</text>
						<!-- ai合规情况结论 S -->
						<view v-if="item.modelId && item.aiResult !== undefined"
							:class="['ai-result', ['gre', 'org', 'red'][item.aiResult == -1 ? 2 : item.aiResult]]"
							@click.stop="preViewFile(item, index)">
							<image class="ai-result-ico" src="@/static/images/ai.svg"></image>
							<text>
								{{ item.aiResult == -1 ? '无法识别' : ['合规', '疑似合规', '不合规'][item.aiResult] }}
							</text>
						</view>
						<!-- ai合规情况结论 E -->
					</view>
					<view class="imgBox-item imgBox-add" @click="addfile">
						<image src="@/static/images/camera.png"></image>
						<view>上传</view>
					</view>
				</view>
				<!-- 备注 -->
				<view class="tips" v-if="checkHistory['remarks' + suffix].need"><text
						v-if="checkHistory['remarks' + suffix].must" style="color:red">*</text>添加描述</view>
				<view class="notice" v-if="checkHistory['remarks' + suffix].need">
					<textarea type="textarea" v-model="remark" height="108rpx"
						:placeholder="checkHistory['remarks' + suffix].placeholder || '请输入..'"
						placeholder-class="textare" style="font-size: 28rpx;height:108rpx;" maxlength="300" />
					<view class="length">{{ remark.length + '/300' }}</view>
				</view>

				<view class="tips" v-if="checkHistory['records' + suffix].need"><text
						v-if="checkHistory['records' + suffix].must" style="color:red">*</text>添加数据</view>
				<view class="records" v-if="checkHistory['records' + suffix].need">
					<input type="text" v-model="record"
						:placeholder="checkHistory['records' + suffix].placeholder || '请输入..'" />
					<text>{{ checkHistory['records' + suffix].unit || '' }}</text>
				</view>

				<view class="save"><button hover-class="none" @click="handleSave">提交</button></view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { editCHeckRecord } from '@/apis/workOrder.js';
import { updateWatermark } from '@/apis/system.js';
import { getlocalinfo } from '@/utils/utils.js';
import { setSyncData } from '@/utils/offline.js';
import { dateFormat } from '@/utils/utils.js';
import { setWatermarkJson, setPath, getWaterMarkInfo } from '@/utils/watermarkTool.js';
import sidaAI from '@/utils/ai';
import { MODEL_ID_MAP } from '@/utils/constants.js';

import md5 from 'js-md5';

export default {
	props: {
		planId: [String, Number],
		show: {
			type: Boolean,
			default: false
		},
		planInfo: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},

	components: {

	},
	data() {
		return {
			title: '保养记录',
			suffix: '',
			// 历史记录
			checkHistory: {
				files: {},
				records: {},
				remarks: {}
			},
			// 图片或视频
			imgUrl: [],
			// 描述
			remark: '',
			// 数据记录
			record: '',
			// 模型 modelType 1签到模型，2签退模型 空不使用模型 
			modelType: '',
			// 判断当前小程序环境 ios/android
			platform: uni.getSystemInfoSync().platform
		};
	},
	watch: {},
	created() { },
	beforeDestroy() {
		uni.$off('uploadImg');
	},
	computed: {
		...mapState('user', ['userinfo']),
		// 离线状
		...mapState('system', ['onlineStatus'])
	},
	methods: {
		initData(his) {
			console.log('recordDialog [initData] his', JSON.stringify(his));
			// 保养前后标识
			this.suffix = his.comparisonType || '';
			this.title = this.suffix ? (this.suffix == 'After' ? his.afterName : his.beforeName) : (his.recordName);

			this.checkHistory = his;
			console.log('hist', this.checkHistory, this.suffix);
			this.imgUrl = JSON.parse(JSON.stringify(this.checkHistory['files' + this.suffix].val || []));
			this.remark = this.checkHistory['remarks' + this.suffix].val || '';
			this.record = this.checkHistory['records' + this.suffix].val || '';
		},
		clased() {
			this.$emit('closed', false);
		},
		// 预览
		preViewFile(item, index) {
			this.$previewMedia({
				sources: this.imgUrl,
				current: index
			});
		},
		// 睡眠一会 time 毫秒
		timeSleep(time = 0) {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve();
				}, time);
			});
		},

		// 添加图片或视频
		addfile() {
			const max = this.checkHistory['files' + this.suffix].max || 9;
			// 查看这个工作项拍照是否需要模型 
			let modelType = this.modelType;

			if (this.imgUrl.length >= max) {
				uni.showToast({
					title: `图片/视频最大可上传${max}个`,
					icon: 'none'
				});
				return;
			}
			const onlyCamera = this.checkHistory['files' + this.suffix].onlyCamera || false;

			uni.showActionSheet({
				itemList: ['添加图片', '添加视频'],
				success: async res => {
					// 等一会（防止渲染没结束
					await this.timeSleep(500);

					if (res.tapIndex === 0) {
						uni.showActionSheet({
							itemList: onlyCamera ? ['拍摄'] : ['拍摄', '从相册选择'],
							success: (dres) => {
								// 模型识别结果
								let aiResult = '';
								// 模型Id
								let modelId = '';

								if (dres.tapIndex === 0) {
									// 水印相机拍摄
									console.log(`[recordDialog.vue] dres.tapIndex :${dres.tapIndex}`);

									try {
										uni.$off('uploadImg');
									} catch (error) {
										console.log(error);
									}
									uni.$once('uploadImg', async (path, imgId, options) => {
										console.log('[recordDialog.vue] uploadImg', path, imgId, options);

										// #ifdef MP-WEIXIN
										uni.showLoading({
											title: '上传中',
											mask: true
										});
										// #endif
										// #ifdef H5 
										if (this.onlineStatus) {
											setTimeout(() => {
												uni.showLoading({
													title: '上传中',
													mask: true
												});
											}, 200);
										}

										// #endif

										let watermark = await getWaterMarkInfo();

										const parseJsonSafely = (jsonString) => {
											if (!jsonString) {
												return {};
											}
											if (typeof jsonString == 'object') {
												return jsonString;
											}
											let jso = null;
											try {
												jso = JSON.parse(jsonString);
											} catch (error) {
												console.error('解析 JSON 失败:', error);
											}
											return jso;
										};

										const opt = parseJsonSafely(options) || {};

										// #ifdef H5 
										const md5Path = md5(path);
										setPath(md5Path, imgId);
										// #endif

										const obj = {
											imgId,
											modelType,
											planId: this.planId,
											locationIds: this.checkHistory.locationIds,
											locationNames: this.checkHistory.locationNames,
											templateContentId: this.checkHistory.templateContentId,
											templateContentName: this.checkHistory.templateContentName,
											templateName: this.checkHistory.templateName,
											templateId: this.checkHistory.templateId,
											type: 3,
											result: '',
											watermark: watermark ? JSON.stringify(watermark) : '',
										};

										// 模型输出结果(modelType有值需要写入模型信息)
										if (modelType && opt.result !== undefined) {
											try {
												aiResult = opt.result;
												// modelId = modelType == 1 ? '3b4caf46-75a1-44c2-9678-097c403a158c' : '04521863-0472-44be-b159-f3eeb2920916';
												modelId = MODEL_ID_MAP[`${modelType}`];
												// 保存模型结果
												Object.assign(obj, {
													model_id: modelId,
													result: aiResult,
													model_result: JSON.stringify(opt.model_result),
												});
											} catch (error) {
												console.log(error);
											}
										}

										await this.setWatermarkJson(obj);

										let img = await this.uploadFileFuc(path, imgId);
										uni.hideLoading();
										if (img == '') {
											return;
										}
										this.imgUrl.push({
											modelType,
											url: img,
											type: 'image',
											aiResult,
											modelId
										});
									});

									let planInfo = this.planInfo;
									planInfo.planWorkItemId = this.checkHistory.templateContentId;
									console.log('[recordDialog.vue] planInfo', planInfo);
									uni.setStorage({
										key: 'waterMarkMsg',
										data: planInfo,
										success: async () => {
											let imgId = await setWatermarkJson({
												planId: this.planId,
												modelType,
												locationIds: this.checkHistory.locationIds,
												locationNames: this.checkHistory.locationNames,
												templateId: this.checkHistory.templateId,
												templateName: this.checkHistory.templateName,
												templateContentId: this.checkHistory.templateContentId,
												templateContentName: this.checkHistory.templateContentName,
												type: 3
											});

											// #ifdef MP-WEIXIN
											uni.$emit('openCamera', { imgType: 1, imgId, modelType });
											// #endif

											// #ifdef H5  
											uni.navigateTo({
												url: '/pages/camera/camera?imgType=1&imgId=' + imgId + (modelType ? `&modelType=${modelType}` : ''),
												fail: (err) => {
													console.log(err);
												}
											});
											// #endif
										},
									});

									return;
								}
								if (dres.tapIndex === 1) {
									// 从相册选择
									// #ifndef H5
									uni.chooseImage({
										sizeType: ['original'],
										sourceType: ['album'],
										count: max - this.imgUrl.length,
										success: async (files) => {
											for (let i = 0; i < files.tempFilePaths.length;) {
												let imgId = '';
												let result = {};
												if (this.modelType && this.onlineStatus) {
													setTimeout(() => {
														uni.showLoading({
															title: '模型处理中',
															mask: true
														});
													}, 200);
													result = await sidaAI.inferImageMultiModel(this.modelType,  files.tempFilePaths[i]);
													console.log('推理结果：', result);

													const obj = {
														planId: this.planId,
														modelType,
														// 3-保养工作项内容
														type: 3,
														result: `${result.determine}`,
														model_id: MODEL_ID_MAP[this.modelType],
														watermark: '',
														model_result: JSON.stringify(result.results),
														locationIds: this.checkHistory.locationIds,
														locationNames: this.checkHistory.locationNames,
														templateContentId: this.checkHistory.templateContentId,
														templateContentName: this.checkHistory.templateContentName,
														templateId: this.checkHistory.templateId,
														templateName: this.checkHistory.templateName,
													};
													imgId = await this.setWatermarkJson(obj);
													uni.hideLoading();
												}
												uni.showLoading({
													title: '上传中',
													mask: true
												});

												let img = await this.uploadFileFuc(files.tempFilePaths[i], imgId);
												if (img) {
													let fileItem = {
														url: img,
														type: 'image'
													};
													if (this.modelType) {
														fileItem.aiResult = result.determine;
														fileItem.modelType = this.modelType;
														fileItem.modelId = MODEL_ID_MAP[this.modelType];
													}
													this.imgUrl.push(fileItem);
												}

												i++;
												uni.hideLoading();
											}
										}
									});
									// #endif

									// #ifdef H5
									console.log('modelType', modelType);

									// 从相册选择图片
									window.sida.chooseImage({
										sizeType: ['original'],
										sourceType: ['album'],
										count: Object.keys(MODEL_ID_MAP).includes(modelType) ? 1 : 9 - this.imgUrl.length,
										success: async (res) => {
											const files = res.tempFilePaths;

											if (files.length == 0) return;

											uni.showLoading({
												title: '上传中',
												mask: true
											});

											// let watermark = await getWaterMarkInfo();

											const processHandler = (data, model) => new Promise((resolve, reject) => {
												window.sida.sidaAI({
													data,
													model,
													success: (res) => resolve(res),
													fail: (err) => reject(err)
												});
											});
											if (Object.keys(MODEL_ID_MAP).includes(`${modelType}`)) {
												for (let i = 0; i < files.length; i++) {
													try {
														const file = files[i];

														const result = await processHandler(file, `${modelType}`);
														const optionsObj = JSON.parse(result);

														const obj = {
															planId: this.planId,
															type: 3, // 3-保养工作项内容
															result: `${optionsObj.result}`,
															// model_id: `${modelType}` === '1' ? '3b4caf46-75a1-44c2-9678-097c403a158c' : '04521863-0472-44be-b159-f3eeb2920916',
															model_id: MODEL_ID_MAP[`${modelType}`],
															// watermark: JSON.stringify(watermark),
															watermark: '',
															model_result: JSON.stringify(optionsObj.model_result),
															locationIds: this.checkHistory.locationIds,
															locationNames: this.checkHistory.locationNames,
															templateContentId: this.checkHistory.templateContentId,
															templateContentName: this.checkHistory.templateContentName,
															templateId: this.checkHistory.templateId,
															templateName: this.checkHistory.templateName,
														};
														const imgId = await this.setWatermarkJson(obj);

														const md5Path = md5(file);
														setPath(md5Path, imgId);

														const url = await this.uploadFileFuc(file, imgId);

														if (url) {
															this.imgUrl.push({
																url: url,
																type: 'image',
																aiResult: `${optionsObj.result}`,
																// modelId: modelType === '1' ? '3b4caf46-75a1-44c2-9678-097c403a158c' : '04521863-0472-44be-b159-f3eeb2920916',
																modelId: MODEL_ID_MAP[`${modelType}`],
															});
														}
													} catch (err) {
														console.error(`处理第 ${i + 1} 个文件时出错:`, err);
														uni.showToast({
															title: `第 ${i + 1} 个文件处理失败`,
															icon: 'none'
														});
													}
												}
											} else {
												// 基础水印数据(项目时间信息)

												// 保养工作项内容不需要水印
												// let watermark = await getWaterMarkInfo();

												for (let i = 0; i < files.length; i++) {
													let url = await this.uploadFileFuc(files[i], null);
													if (url == '') return;
													this.imgUrl.push({
														url: url,
														type: 'image'
													});
												}
											}

											uni.hideLoading();
										}
									});
									// #endif
								}
							}
						});
					} else if (res.tapIndex === 1) {
						uni.showActionSheet({
							itemList: onlyCamera ? ['拍摄'] : ['拍摄', '从相册选择'],
							success: (res) => {
								const sourceType = res.tapIndex > 0 ? 'album' : 'camera';
								uni.chooseVideo({
									sizeType: ['compressed'],
									sourceType: [sourceType],
									compressed: true,
									count: 1,
									success: async files => {
										uni.showLoading({
											title: '上传中',
											mask: true
										});
										console.log('video_files', files);
										
										let url = await this.uploadFileFuc(files.tempFilePath);
										
										if (url == '') return uni.hideLoading();
										this.imgUrl.push({
											img: '',
											url: url,
											type: 'video'
										});
										uni.hideLoading();
									}
								});
							},
						});
					}
				}
			});
		},
		// 上传文件
		uploadFileFuc(file, imgId = '', options) {
			return new Promise(async (resolve) => {
				if (imgId) {
					// 如果有imgid 添加路径关联关系
					// #ifdef H5
					const md5Path = md5(file);
					setPath(md5Path, imgId);
					// #endif

					// #ifndef H5
					setPath(file, imgId);
					// #endif
				} else {
					// 生成imgId
					imgId = await setWatermarkJson({
						planId: this.planId,
						locationIds: this.checkHistory.locationIds,
						locationNames: this.checkHistory.locationNames,
						templateContentId: this.checkHistory.templateContentId,
						templateContentName: this.checkHistory.templateContentName,
						templateName: this.checkHistory.templateName,
						templateId: this.checkHistory.templateId,
						type: 3,
						// watermark: options.watermark ? JSON.stringify(options.watermark) : ''
						watermark: ''
					});

					// #ifndef H5
					setPath(file, imgId);
					// #endif

					// #ifdef H5
					const md5Path = md5(file);
					setPath(md5Path, imgId);
					// #endif
				}
				if (!this.onlineStatus) {
					// 离线，先放本地原文件
					resolve(file);
					return;
				}
				this.http
					.upload(file, imgId, options)
					.then(res => {
						// console.log('uploadFileFuc', res.data);

						resolve(res.data.link);
					})
					.catch(() => {
						uni.showToast({
							title: '上传失败，请检查网络',
							icon: 'none'
						});
						resolve('');
					});
			});
		},
		changeImg(val) {
			console.log(val, 'val的值');
			this.imgUrl = val;
		},
		removeFile(idx) {
			this.imgUrl.splice(idx, 1);
			this.$forceUpdate();
		},
		handleSave() {
			console.log('handleSave');
			let imgUrl = this.imgUrl || [];

			uni.showLoading({
				title: '保存中',
				mask: true
			});
			let result = '';
			let oimgUrl = this.checkHistory['files' + this.suffix].val || [];
			let recordHistory = this.remark || '';
			let orecordHistory = this.checkHistory['remarks' + this.suffix].val || '';
			let recordDataHistory = this.record || '';
			let orecordDataHistory = this.checkHistory['records' + this.suffix].val || '';

			if (JSON.stringify(imgUrl) != JSON.stringify(oimgUrl)) {
				if (imgUrl.length == oimgUrl.length) {
					result = result + '更新了文件';
				} else {
					if (imgUrl.length > oimgUrl.length) {
						result = result + '上传了' + (imgUrl.length - oimgUrl.length) + '个文件';
					} else {
						result = result + '删除了' + (oimgUrl.length - imgUrl.length) + '个文件';
					}
				}
			}

			if (recordHistory != orecordHistory) {
				result = result + (result.length > 0 ? '，' : '');
				result = result + (orecordHistory ? '更新了描述' : '添加了描述');
			}

			if (recordDataHistory != orecordDataHistory) {
				result = result + (result.length > 0 ? '，' : '');
				result = result + (orecordDataHistory ? '更新了数值' : '添加了数值');
			}
			this.checkHistory['files' + this.suffix].val = this.imgUrl || [];
			this.checkHistory['records' + this.suffix].val = this.record;
			this.checkHistory['remarks' + this.suffix].val = this.remark;

			if (this.checkHistory['files' + this.suffix].need && this.checkHistory['files' + this.suffix].must && (!this.checkHistory['files' + this.suffix].val || this.checkHistory['files' + this.suffix].val.length == 0)) {
				uni.hideLoading();
				uni.showToast({
					title: '图片/视频不能为空',
					icon: 'none'
				});
				return;
			}
			if (this.checkHistory['files' + this.suffix].need && this.checkHistory['files' + this.suffix].must && this.checkHistory['files' + this.suffix].min) {
				if (this.checkHistory['files' + this.suffix].min > imgUrl.length) {
					uni.hideLoading();
					uni.showToast({
						title: `图片/视频至少需上传${this.checkHistory['files' + this.suffix].min}张`,
						icon: 'none'
					});
					return;
				}
			}
			if (this.checkHistory['remarks' + this.suffix].need && this.checkHistory['remarks' + this.suffix].must && (!this.checkHistory['remarks' + this.suffix].val && this.checkHistory['remarks' + this.suffix].val !== 0)) {
				uni.hideLoading();
				uni.showToast({
					title: '描述不能为空',
					icon: 'none'
				});
				return;
			}
			if (this.checkHistory['records' + this.suffix].need && this.checkHistory['records' + this.suffix].must && (!this.checkHistory['records' + this.suffix].val && this.checkHistory['records' + this.suffix].val !== 0)) {
				uni.hideLoading();
				uni.showToast({
					title: '数据不能为空',
					icon: 'none'
				});
				return;
			}
			if (!this.planId) {
				uni.showToast({
					title: '当前为预览状态，禁止操作',
					icon: 'none'
				});
				return;
			}
			this.checkHistory['files'] = this.checkHistory['files' + this.suffix];
			this.checkHistory['records'] = JSON.parse(JSON.stringify(this.checkHistory['records' + this.suffix]));
			this.checkHistory['remarks'] = this.checkHistory['remarks' + this.suffix];
			const params = {
				planId: this.planId,
				userId: this.userinfo.user_id,
				userName: this.userinfo.nick_name,
				checkHistoryId: this.checkHistory.checkHistoryId,
				recordLog: result,
				// 1普通记录  2保养前 3 保养后
				status: this.suffix ? (this.suffix == 'After' ? 3 : 2) : 1,
				recordDataValue: this.checkHistory,
				templateContentId: this.checkHistory.templateContentId,
				createTime: dateFormat('YYYY-MM-DD hh:mm:ss'),
				local: true
			};
			if (!this.onlineStatus) {
				// console.log(params, this.checkHistory)
				uni.showLoading({
					title: '保存中',
				});
				setSyncData('checkRecords', params);
				setTimeout(() => {
					uni.hideLoading();
					this.$emit('closed');
					this.$emit('addRecord');
				}, 300);

				return;
			}

			editCHeckRecord(params).then(async () => {
				uni.hideLoading();
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				});
				try {
					let localInfo = await this.getLocalInfo();
					let address = await getlocalinfo(localInfo.latitude, localInfo.longitude);

					console.log('imgUrl', imgUrl);
					let imgarr = [];
					for (let i = 0; i < imgUrl.length; i++) {
						if (imgUrl[i].type == 'image') {
							imgarr.push(imgUrl[i].url);
						}
					}

					updateWatermark({
						imgUrlList: imgarr,
						watermarkType: 1,
						planId: this.planId,
						planWorkItemId: this.checkHistory.templateContentId,
						imgUploadAddress: (!localInfo.latitude || !address.result ? '无法获取定位地址' : address.result.address)
					});
					let pages = getCurrentPages();
					let pag = pages[pages.length - 1];
					if (pag.data && pag.data.planId) {
						/* 定位上报埋点*/
						// this.reportAddress({
						// 	userId: this.userinfo.user_id,
						// 	operation: 4,
						// 	planId: pag.data.planId,
						// 	recordType: 1// 
						// })
						/* 定位上报埋点 end*/
					}
				} catch (error) {
					console.log(error);
				}

				this.$emit('closed');
				this.$emit('addRecord');
			});
		},

	}
};
</script>

<style lang="scss" scoped>
.mask {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	z-index: 120;
	background-color: $uni-bg-color-mask;
}

.work-record {
	background-color: #fff;
	padding: 20rpx 40rpx 32rpx 40rpx;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
	position: fixed;
	z-index: 121;
	bottom: 0;
	transition: 0.4s all;
	transform: translateY(1000rpx);

	.line {
		margin-bottom: 18rpx;
		display: flex;
		justify-content: center;

		text {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
		}
	}

	.content {
		width: 100%;

		.content_title {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
			color: #000;
		}

		.tips {
			display: flex;
			color: #000;
			align-items: center;
			margin-bottom: 16rpx;
			margin-top: 20rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 6rpx;
			}
		}

		.imgBox {
			display: flex;
			flex-wrap: wrap;
			width: calc(100%);

			&-item {
				width: 112rpx;
				height: 112rpx;
				background: #f7f7f8;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.text {
					position: absolute;
					display: block;
					width: 32rpx;
					height: 32rpx;
					top: -10rpx;
					font-weight: bold;
					font-size: 34rpx;
					line-height: 25rpx;
					border-radius: 50%;
					right: -7rpx;
					text-align: center;
					color: #fff;
					z-index: 9;
					background: #ababab;
				}

				.ai-result {
					position: absolute;
					bottom: 0;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					width: 112rpx;
					height: 32rpx;
					color: #fff;
					font-size: 22rpx;
					padding: 0;
					vertical-align: unset;
					font-weight: normal;

					&-ico {
						width: 21rpx;
						height: 21rpx;
						margin-right: 4rpx;
					}
				}

				.gre {
					background-color: #68CA00;
				}

				.org {
					background-color: #FF7505;
				}

				.red {
					background-color: #E02020;
				}
			}

			&-add {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				// border: 1rpx solid #e0e0e0;
				background-color: #f7f7f8;
				flex-wrap: wrap;
				color: $theme-color;
				font-size: 24rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				view {
					width: 100%;
					text-align: center;
				}
			}
		}

		.notice {
			width: 94%;
			padding: 20rpx;
			height: 108rpx;
			border: 2rpx solid #e9e9e9;
			border-radius: 4rpx;
			position: relative;
			padding-bottom: 30rpx;
		}

		textarea {
			font-size: 28rpx;
			width: 100%;
			height: 108rpx;
		}

		.length {
			text-align: right;
			color: #ccc;
			position: absolute;
			right: 10rpx;
			font-size: 2;
			font-size: 24rpx;
			bottom: 5rpx;
		}

		.records {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			justify-content: flex-start;

			input {
				width: 316rpx;
				/* height: 72rpx; */
				border: 2rpx solid #e9e9e9;
				border-radius: 4rpx;
				/* line-height: 72rpx; */
				padding: 12rpx;
			}

			text {
				color: #666666;
				margin-left: 10rpx;
			}
		}
	}

	.save {
		flex: 1;
		display: flex;
		justify-content: center;
		margin-top: 20rpx;

		button {
			display: flex;
			width: 670rpx;
			height: 70rpx;
			// background: #0091ff;
			border-radius: 8rpx;
			// color: #fff;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
